import React from 'react';
import {
  StyleSheet,
  View,
  Text,
  TouchableHighlight,
  TouchableWithoutFeedback,
} from 'react-native';
import Divide from '../commonComponents/divide';

export default () => {
  return (
    <View style={styles.root}>
      <Text style={{color: 'orange', fontSize: 20, textAlign: 'center'}}>
        7_8TouchableHighlightDemo
      </Text>
      <TouchableHighlight
        style={styles.button}
        activeOpacity={0.8}
        onPress={() => {
          console.log('onPress ...');
        }}
        underlayColor="#00bcd4">
        <Text style={styles.txt}>按钮</Text>
      </TouchableHighlight>

      <Divide />
      {/* 直接给TouchableWithoutFeedback 设置style是不生效的，需要在里面给个view才会生效 */}
      <TouchableWithoutFeedback>
        <View style={styles.button2}>
          <Text style={styles.txt}>TouchableWithoutFeedback</Text>
        </View>
      </TouchableWithoutFeedback>
    </View>
  );
};

const styles = StyleSheet.create({
  root: {
    width: '100%',
    height: 'auto',
    backgroundColor: '#F0F0F0',
  },
  button: {
    width: 300,
    height: 65,
    backgroundColor: '#2030FF',
    justifyContent: 'center',
    alignItems: 'center',
  },
  button2: {
    width: 300,
    height: 65,
    backgroundColor: 'red',
    justifyContent: 'center',
    alignItems: 'center',
  },
  txt: {
    fontSize: 18,
    color: 'white',
    fontWeight: 'bold',
  },
});
